<template>
	<view class="container">
		<!-- 顶部选项卡 -->
		<view class="tab-container">
			<view :class="['tab-item', activeTab === 'express' ? 'tab-active' : 'tab-backgroundColor']"
				@click="activeTab = 'express'">
				快递到家
			</view>
			<view :class="['tab-item', activeTab === 'selfPick' ? 'tab-active' : 'tab-backgroundColor']"
				@click="activeTab = 'selfPick'">
				<text class="icon-text">
					<uni-icons type="home-filled" size="18" />
					到店自提
				</text>
			</view>
		</view>

		<!-- 内容区域 -->
		<view v-if="activeTab === 'express'">
			<!-- 快递到家内容 -->
			<view class="user-info">
				<view v-if="addressData">
					<view class="user-name">
						<text>{{ addressData.name }}</text>
						<text class="user-phone">{{ addressData.phoneNumber }}</text>
					</view>
					<view class="user-address">
						<text>{{ addressData.province }}</text>
						<text>{{ addressData.city }}</text>
						<text>{{ addressData.district }}</text>
						<text class="detail-address">{{ addressData.detailedAddress }}</text>
					</view>
					<text class="modify" @click="goToAddAddress">修改></text>
				</view>
				<view v-else class="no-address">
					<text>暂无默认地址</text>
					<text class="add-address" @click="goToAddAddress">点击去添加默认地址</text>
				</view>
			</view>
			<view class="express-product-list">
				<view class="product-item" v-if="productList.length > 0">
					<image class="product-img" :src="productList[0].image" mode="aspectFit" />
					<view class="product-desc-box">
						<text class="product-name">{{ productList[0].name }}</text>
						<text class="product-spec">规格：{{ productList[0].specification }}</text>
						<text class="product-count">数量：{{ productList[0].count }}</text>
					</view>
					<text class="product-point">{{ productList[0].points }}积分</text>
				</view>
			</view>
		</view>
		<view v-else>
			<!-- 到店自提内容 -->
			<!-- 公司信息 -->
			<view class="company-info-box">
				<text class="company-name">邯郸奥维生物科技有限公司</text>
				<text class="company-address">河北省邯郸市经济开发区美的路113号</text>
			</view>
			<!-- 商品列表 -->
			<view class="product-list-box">
				<view class="product-item" v-if="productList.length > 0">
					<image class="product-img" :src="productList[0].image" mode="aspectFit" />
					<view class="product-desc-box">
						<text class="product-name">{{ productList[0].name }}</text>
						<text class="product-spec">规格：{{ productList[0].specification }}</text>
						<text class="product-count">数量：{{ productList[0].count }}</text>
					</view>
					<text class="product-point">{{ productList[0].points }}积分</text>
				</view>
			</view>
		</view>

		<!-- 底部操作栏 -->
		<view class="bottom-operate">
			<text class="total-point">
				<text class="point-num" style="color: #ff6600;">{{ totalPoints }}</text>积分
			</text>
			<button class="exchange-btn" @click="handleExchange">去兑换</button>
		</view>
	</view>
</template>

<script>
	import {
		addressApi
	} from '@/package/api/user_address.js';
	import {
		pointsOrder
	} from '@/package/api/pointsOrder.js';
	import {
		useStore
	} from '@/store/counter.js';

	export default {
		data() {
			return {
				activeTab: 'selfPick',
				productList: [],
				totalPoints: 0,
				addressData: null,
				useStoreObj: useStore()
			};
		},
		onLoad() {
			this.loadProductList();
		},
		onShow() {
			this.fetchDefaultAddress();
		},
		methods: {
			loadProductList() {
				const shangPin = this.useStoreObj.shangPinObj.value;
				if (shangPin) {
					this.productList = [{
						id: shangPin.id,
						image: shangPin.image,
						name: shangPin.name,
						specification: shangPin.guiGe,
						count: 1,
						points: shangPin.jiFen
					}];
					this.totalPoints = shangPin.jiFen;
				} else {
					this.productList = [{
						id: 2,
						image: 'https://aw2025ht.kangye.xyz/api/profile/upload/srYmbYTJbylp.png',
						name: '立美丝凡士林保湿霜干皮润肤霜身体乳',
						specification: '250g',
						count: 1,
						points: '199'
					}];
					this.totalPoints = 199;
					uni.setStorageSync('productList', this.productList);
				}
			},
			async fetchDefaultAddress() {
				try {
					const response = await addressApi.getUserDefault();
					if (response.code === 200 && response.data) {
						const provinceValue = Number(response.data.province);
						if (provinceValue === 0 || response.data.province === '0') {
							response.data.province = '广东省';
							response.data.city = '广州市';
							response.data.district = '天河区';
						}
						this.addressData = response.data;
					} else {
						this.addressData = null;
					}
				} catch (error) {

				}
			},
			handleExchange() {
				uni.showModal({
					title: '兑换',
					content: '兑后积分不退，确定要兑换该商品吗？',
					confirmText: '确定',
					cancelText: '取消',
					success: (res) => {
						if (res.confirm) {
							const PointsOrder = {};
							PointsOrder.product = this.productList[0].id;

							if (this.activeTab === 'express') {
								PointsOrder.orderType = 1;
								if (!this.addressData) {
									uni.showToast({
										title: '请先添加默认地址',
										icon: 'none'
									});
									return;
								}
								Object.assign(PointsOrder, {
									userProvince: this.addressData.province,
									userCity: this.addressData.city,
									userDistrict: this.addressData.district,
									userName: this.addressData.name,
									userPhone: this.addressData.phoneNumber
								});
								console.log('快递地址信息：', PointsOrder);
							} else {
								PointsOrder.orderType = 2;
								console.log('到店自提信息：', PointsOrder);
							}

							pointsOrder.add(PointsOrder)
								.then((res) => {
									console.log('请求成功', res);
									const zuoshou2 = uni.getStorageSync('qianDaoJiFen') || '0';
									let jiFen = Number(zuoshou2) - Number(this.totalPoints);
									uni.setStorageSync('qianDaoJiFen', jiFen);
									uni.showToast({
										title: '兑换成功',
										icon: 'success'
									});
									uni.navigateTo({
										url: '/packagenew/pages/dingDanXiangQing/dingDanXiangQing'
									});
								})
								.catch((err) => {
									console.error('兑换失败', err);
									uni.showToast({
										title: '兑换失败，请重试',
										icon: 'none'
									});
								});
						}
					}
				});
			},
			goToAddAddress() {
				uni.navigateTo({
					url: '/package/pages/user_address/user_address'
				});
			}
		}
	};
</script>

<style>
	.container {
		background-color: #f5f5f5;
		margin: 25px 23px 0;
	}

	.tab-container {
		display: flex;
		background-color: white;
		margin: 0;
	}

	.tab-item {
		flex: 1;
		text-align: center;
		padding: 12px 0;
		font-size: 16px;
		background-color: #E9E9E9;
		color: #666;
		border-bottom: 2px solid transparent;
		transition: all 0.3s ease;
	}

	.tab-item.tab-active {
		background-color: white;
	}

	.icon-text {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 5px;
	}

	.user-info {
		background-color: white;
		padding: 15px;
		margin: 10px 0;
		border-radius: 6px;
		position: relative;
	}

	.user-name {
		display: flex;
		align-items: center;
		gap: 10px;
		font-size: 16px;
		margin-bottom: 5px;
		color: #000;
	}

	.user-phone {
		color: #000;
		font-size: 14px;
	}

	.user-address {
		display: flex;
		align-items: center;
		gap: 5px;
		font-size: 14px;
		color: #000;
		margin-bottom: 5px;
	}

	.detail-address {
		color: #000;
		font-size: 14px;
	}

	.modify {
		position: absolute;
		right: 15px;
		top: 15px;
		font-size: 14px;
		color: #999;
	}

	.express-product-list {
		background-color: white;
		border-radius: 8px;
		overflow: hidden;
		margin: 10px 0;
	}

	.product-item {
		display: flex;
		align-items: center;
		padding: 15px;
		border-bottom: 1px solid #f5f5f5;
	}

	.product-img {
		width: 80px;
		height: 80px;
		margin-right: 15px;
	}

	.product-desc-box {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.product-name {
		font-size: 15px;
		margin-bottom: 5px;
	}

	.product-spec,
	.product-count {
		font-size: 13px;
		color: #b7b6b6;
		line-height: 20px;
	}

	.product-point {
		font-size: 14px;
		color: #b7b6b6;
	}

	.bottom-operate {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: white;
		padding: 15px;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
		z-index: 999;
	}

	.total-point {
		font-size: 16px;
		margin: 0px 0px 0px 7px;
		color: #333;
	}

	.point-num {
		font-weight: bold;
		font-size: 24px;
		margin-right: 5px;
	}

	.exchange-btn {
		background-color: #ff6600;
		color: white;
		border: none;
		padding: 6rpx 50rpx;
		border-radius: 40rpx;
		font-size: 30rpx;
		margin: 0rpx 20rpx 0rpx 0rpx;
		transition: transform 0.2s ease;
	}

	.exchange-btn:hover {
		transform: scale(1.02);
	}

	.no-address {
		padding: 15px;
		color: #666;
		display: flex;
		align-items: center;
		gap: 5px;
	}

	.add-address {
		color: #1aad19;
		text-decoration: underline;
		cursor: pointer;
	}

	.company-info-box {
		background-color: white;
		padding: 15px;
		margin: 0;
		border-radius: 6px;
		display: flex;
		flex-direction: column;
		gap: 5px;
	}

	.company-name {
		font-size: 16px;
		font-weight: 600;
		margin: 0;
	}

	.company-address {
		font-size: 14px;
		color: #666;
		margin: 0;
	}

	.product-list-box {
		background-color: white;
		border-radius: 8px;
		overflow: hidden;
		margin: 10px 0;
	}
</style>